<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<header>
			<h1 class="logo"><img src="img/logo.jpg"/></h1>
			<ul class="nav">
				<li>
					<a href="#">导航链接一</a>
				</li>
				<li>
					<a href="#">导航链接二</a>
				</li>
				<li>
					<a href="#">导航链接三</a>
				</li>
				<li>
					<a href="#">导航链接四</a>
				</li>
			</ul>
		</header>
		<article class="firstArticle">
			<h2>文章一级标题</h2>
			<br />
			<h3>文章二级标题</h3>
			<br />
			<h4>文章作者 文章发表时间</h4>
			<br />
			<p class="firstArticle_Article">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，
				<a href="//www.baidu.com">链接到百度</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<b>粗体字</b>，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，</p>
			<br />
			<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="图片" />
			<br />
			<br />
			<p class="firstArticle_Article">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
				<a href="//www.baidu.com" target="_block">链接到百度,新窗口</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<b>粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，</p>
		</article>
		<article class="secondArtcle">
			<h2>另一篇文章的一级标题</h2>
			<br />
			<h3>二级标题</h3>
			<br />
			<h4>文章作者，发表时间</h4>
			<br />
			<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="图片" />
			<br />
			<br />
			<ul class="secondArtcle_Nav">
				<li>列表项目一</li>
				<li>列表项目二</li>
				<li>列表项目三</li>
				<li>列表项目四</li>
			</ul>
		</article>
		<article class="Photo">
			<h2>图片</h2>

			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
			<div class="ImgBox">
				<p>好看的图片</p>
				<img src="img/u=3144465310,4114570573&fm=116&gp=0.jpg" alt="tupian" />
			</div>
		</article>
		<article class="LastArtcile">
			<h2>最后一篇文章的一级标题</h2>
			<br />
			<h3>文章二级标题</h3>
			<br />
			<h4>文章作者 文章发表时间</h4>
			<br />
			<ol class="paihangbang">
				<li>排名1</li>
				<li>排名2</li>
				<li>排名3</li>
				<li>排名4</li>
			</ol>
			<br />
			<p>下面是一个表格</p>
			<table>
				<tr>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
				</tr>
				<tr>
					<td>内容单元格</td>
					<td>内容单元格</td>
					<td>
						<a href="#">操作</a>
					</td>
				</tr>
				<tr>
					<td>内容单元格</td>
					<td>内容单元格</td>
					<td>
						<a href="#">操作</a>
					</td>
				</tr>
				<tr>
					<td>内容单元格</td>
					<td>内容单元格</td>
					<td>
						<a href="#">操作</a>
					</td>
				</tr>
				<tr>
					<td>内容单元格</td>
					<td>内容单元格</td>
					<td>
						<a href="#">操作</a>
					</td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="2">1000</td>
				</tr>
			</table>
		</article>
		<aside>
			<h2>这是侧栏的标题</h2>
			<form action="" method="post">
				<p class="Emil"><label for="mail">请输入邮箱地址：</label>
					<input type="text" name="" id="mail" value="这是一个文本输入框" />
				</p>
				<br />
				<p class="Error">邮箱地址请按要求填写</p>
				<br />
				<p class="PassWord"><label for="mima">请输入密码:</label>
					<input type="password" name="mima" id="mima" value="这是一个文本输入框" />
				</p>
				<p class="PassWordAgain">
					<label for="mimaagain">请重复输入密码:</label>
					<input type="password" name="mima" id="mimaagain" value="这是一个文本输入框" />
				</p>
				<br />
				<p class="Error">密码请为6-16位英文数字</p>
				<br />
				<p class="Sex">
					性别：
					<input type="radio" name="sex" id="man" value="man" />
					<label for="man">男</label>
					<input type="radio" name="sex" id="woman" value="woman" />
					<label for="woman">女</label>
				</p>
				<p class="City">
					城市：
					<select>
						<option>北京</option>
						<option>上海</option>
						<option>青岛</option>
					</select>
				</p>
				<p class="Like">
					爱好：
					<input type="checkbox" name="like" id="run" value="run" />
					<label for="run">运动</label>
					<input type="checkbox" name="like" id="art" value="art" />
					<label for="art">艺术</label>
					<input type="checkbox" name="like" id="eat" value="eat" />
					<label for="eat">美食</label>
				</p>
				<p class="Idea">
					个人描述：
					<textarea rows="6" cols="50">多行输入框，个人描述</textarea>
				</p>
				<input type="submit" id="Sub" value="确认提交" />
			</form>
		</aside>
		<footer>版权所有&#169;</footer>
	</body>

</html>